<template>
  <demo-content :title="title">
    <p></p>
    <canvas ref="canvasRef" width="600" height="400"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { drawGrid } from "./utils";

const title = "坐标绘制";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  drawGrid(ctx, { stepx: 10, stepy: 10, lineWidth: 1 });
  ctx.beginPath();
  const x0 = 40;
  const y0 = 360;
  ctx.moveTo(x0, y0);
  ctx.lineTo(560, y0);
  ctx.moveTo(x0, y0);
  ctx.lineTo(x0, 40);
  ctx.strokeStyle = "blue";
  // 绘制横轴
  for (let i = 1; i < 52; i++) {
    const addLen = i % 5 ? 0 : 5;
    ctx.moveTo(x0 + i * 10, y0 - 5 - addLen);
    ctx.lineTo(x0 + i * 10, y0 + 5 + addLen);
  }
  // 绘制纵轴
  for (let i = 1; i < 32; i++) {
    const addLen = i % 5 ? 0 : 5;
    ctx.moveTo(x0 - 5 - addLen, y0 - i * 10);
    ctx.lineTo(x0 + 5 + addLen, y0 - i * 10);
  }
  ctx.stroke();
});
</script>

<style src="./default.css" scoped></style>
